<template>
  <div>
    <div class="top">
      <div class="fl top-left">管理员列表</div>
      <!-- <el-input size="mini" class="fr top-right" suffix-icon="el-icon-search" placeholder="请输入搜索的姓名或证件号码" /> -->
    </div>
    <div class="body">
       <el-button type="primary" size="mini" style="margin-bottom:20px" @click="dialogAdd()">新增管理人员</el-button>
       <el-table
          max-height="500px"
          :header-cell-style="{
            'background-color': '#FAFAFA',
            'height': '54px',
            'color': '#000000',
            'font-size': '14px',
            'font-weight': 'bold'
        }"
          :data="tableData"
          size="mini"
          empty-text="暂无数据"
          stripe
          style="width: 100%">
          <el-table-column
            label="头像"
            align="center"
            width="180">
             <template slot-scope="scope">
                <el-image :src="scope.row.portrait"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            width="80">
             <template slot-scope="scope">
                {{scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column
            label="账号"
            align="center">
             <template slot-scope="scope">
                {{scope.row.account}}
            </template>
          </el-table-column>
          <el-table-column
            label="登录密码">
             <template slot-scope="scope">
                <span :title="scope.row.password">{{scope.row.password}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="120">
             <template slot-scope="scope">
                <el-button type="text" @click="xiugai(scope.row)">修改</el-button>
                <el-button v-if="scope.row.logicalDelete" type="text" @click="tingyong(scope.row, false)">启用</el-button>
                <el-button v-else type="text" style="color:red" @click="tingyong(scope.row, true)">停用</el-button>
                <!-- <el-button type="text" @click="shanchu(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div style="width:100%;height:30px;margin-top: 24px;">
          <el-pagination
            style="float:right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :hide-on-single-page="false"
            :current-page="tiaojian.page"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-size="tiaojian.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
    </div>
    <el-dialog title="维护数据" :close-on-click-modal="false" style="min-width:900px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt must">姓名：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" v-model="form.name" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt must">账号：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" v-model="form.account" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt must">密码：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" v-model="form.password" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt must">头像上传：</span>
          </el-col>
          <el-col class="mb" :span="span2">
          <el-upload
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.name===''||form.account===''||form.password===''||imageUrl===''" type="primary" title="姓名、账号、密码和头像不能为空" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $http from '@/utils/request'
import $httpJSON from '@/utils/requestJSON'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      url: '',
      dialogFormVisible: false,
      span1: 5,
      span2: 15,
      imageUrl: '',
      type_all: [],
      tableData: [{
        name: '级别一',
        value: 1,
      }, {
        name: '级别二',
        value: 2,
      }],
      total: 50,
      tiaojian: {
        page: 1,
        size: 10
      },
      form: {
        name: '',
        account: '',
        password: '',
        portrait: '',
        id: ''
      }
    }
  },
  watch: {
  },
  mounted() {
    this.url = localStorage.getItem('basePath') + '/file/upload/eimage'
    this.getData()
  },
  methods: {
    getData() {
      $http.get('/administrator/getlist', this.tiaojian).then(response => {
        if (response.success) {
          this.tableData  = response.data.list
          this.total  = response.data.total
        } else  {
          this.$message.error({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    dialogAdd() {
      this.imageUrl = ''
      this.form = {
        name: '',
        account: '',
        password: '',
        portrait: '',
        id: ''
      } 
      this.dialogFormVisible = true
    },
    xiugai(item) {
      for(let i in this.form) {
        this.form[i] = item[i]
      }
      this.imageUrl = item.portrait
      this.dialogFormVisible = true
    },
    tingyong (val,pd) {
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.$message({
      //       type: 'success',
      //       message: '操作成功!'
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消操作'
      //     }) 
      //   })
      $http.post('/administrator/amend/logical' + '?id=' + val.id + '&logical=' + pd,).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          val.logicalDelete = pd
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    shanchu (val) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $http.post('/administrator/remove/' + val.id,).then(response => {
            if (response.success) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getData()
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    submit() {
      if (this.form.password.length < 6) {
        this.$message.success('请输入最少为6位的密码')
        return false
      }
      this.form.portrait = this.imageUrl
      let form = {
        name: this.form.name,
        account: this.form.account,
        password: this.form.password,
        portrait: this.form.portrait
      }
      if (this.form.id) {
        form.id = this.form.id
        $httpJSON.post('/administrator/amend', form).then(response => {
          if (response.success) {
            this.dialogFormVisible = false
            this.getData()
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        $httpJSON.post('/administrator/add', form).then(response => {
          if (response.success) {
            this.dialogFormVisible = false
            this.getData()
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiaojian.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tiaojian.page = val
      this.getData()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.success) {
        this.imageUrl = res.data
      } else  {
        this.$message.error('上传失败');
      }
    },
    beforeAvatarUpload(file) {
      // 上传前控制上传文件大小类型
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
      return true;
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  width:100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left{
  line-height:30px;
  font-size: 20px;
  color: #333333;
}
.top-right{
  width: 272px;
  line-height:30px;
}
.body{
  margin:24px 0 30px 24px;
  padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  // height: calc(100vh - 0px);
  background-color: white;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
